<template>  
  <div class="container">  
    <label for="date" class="input-time">选择日期 </label>  
    <input type="date" id="date" v-model="selectedDate" />  

    <button @click="saveDateTime" class="btn">保存日期</button>  
    <button @click="resetDateTime" class="btn">重置</button>  
  
    <!-- 保存时间显示框 -->  
    <div class="saved-time-box">  
      <p>保存的日期: {{ savedDateTime }}</p>  
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['selectedDate','placeId'], // 接收地点ID作为props和目前的时间
  data() {  
    return {  
      selectedDate: '', // 初始日期为空字符串  
      savedDateTime: '', // 保存的日期时间  
    };  
  },  
  methods: {  
    saveDateTime() {  
      // 验证日期是否为空  
      if (!this.selectedDate) {  
        alert('请选择一个日期');  
        return;  
      }  

      // 合并日期和时间，这里仅作为字符串展示，实际使用中可能需要转换为Date对象  
      this.savedDateTime = `${this.selectedDate}`; // 添加T和秒（这里假设秒为00）  
      // 可以添加保存逻辑，如发送到服务器等  
      // 在这里将日期时间保存到数据库，使用地点ID进行关联
      saveDateTimeToDatabase(this.id, this.selectedDate);
    },  
    resetDateTime() {  
      this.selectedDate = '';  
      this.savedDateTime = '';  
    }  
  }  
};  
</script>


<style scoped>  
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 20px;
}

.input-container {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.input-container label {
  margin-right: 10px;
}

input[type="date"],
input[type="text"] {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  width: 200px;
}

.btn {
  font-size: 14px;
  margin: 5px 10px 5px 0;
  padding: 5px 10px;
  border: none;
  background-color: rgba(128, 128, 128, 0.5);
  color: white;
  cursor: pointer;
  border-radius: 8px;
}

.btn:hover {
  background-color: rgba(128, 128, 128, 0.7);
}

.saved-time-box {
  width: 300px;
  padding: 10px;
  margin-top: 20px;
  border: 2px solid rgba(180, 237, 235, 0.8);
  border-radius: 8px;
  font-size: 14px;
  background-color: rgba(235, 235, 235, 0.5);
}

</style>


